<template>
	<view class="VideoDetail">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar background="rgba(0,0,0,0)" backIconColor="white">
			<view class="slotBox" slot="right" @click="showSheet">
				<u-icon name="more-dot-fill" size="40" color="#fff"></u-icon>
			</view>
		</u-navbar>
		<view class="VideoDetailBox">
			<view class="VideoBox">
				<video v-if="info.share_image" :src="getImage(info.share_image[0].image_url)" play-btn-position="center"
					:controls="true" :poster="getVideoUrl(info.share_image[0].image_url)" autoplay></video>
			</view>
			<view class="videoInfo">
				<view class="userInfo" style="justify-content: space-between;">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view class="userImage">
							<image v-if="info.user" :src="getImage(info.user.image_url)" mode="" :data-id="info.user.id"
								@click="toMine"></image>
						</view>
						<view class="userName" v-if="info.user"
							style="max-width: 200upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
							{{info.user.username}}
						</view>
					</view>
					<view v-if="info.shop||info.ShopPackage" @click="toShop"
						style="display: flex;align-items: center;flex-direction: row;padding: 8upx 16upx;background-color: rgba(0,0,0,.2);">
						<image src="../../static/mine/shopIcon.png"
							style="width: 36upx;height: 36upx;margin-right: 8upx;"></image>
						<text v-if="info.ShopPackage"
							style="font-size: 24upx;line-height: 36upx;color: white;max-width: 300upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{info.ShopPackage.name}}</text>
						<text v-if="info.shop&&!info.ShopPackage"
							style="font-size: 24upx;line-height: 36upx;color: white;max-width: 300upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{info.shop.name}}</text>
					</view>
					<view v-if="info.third_party_title" @click="toWebview"
						style="display: flex;align-items: center;flex-direction: row;padding: 8upx 16upx;background-color: rgba(0,0,0,.2);">
						<image src="../../static/mine/shopIcon.png"
							style="width: 36upx;height: 36upx;margin-right: 8upx;"></image>
						<text
							style="font-size: 24upx;line-height: 36upx;color: white;max-width: 300upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{info.third_party_title}}</text>
					</view>
				</view>
				<view class="videoCont">
					<u-collapse arrow-color="#fff" v-if="info.title">
						<u-collapse-item :title="info.title">
							<textarea class="collapse-item" v-model="info.content" disabled :auto-height="true"
								maxlength="-1">

							</textarea>
						</u-collapse-item>
					</u-collapse>
				</view>
				<!-- 				<view class="businessBox">
					<view class="businessImage">
						<image v-if="info.shop" :src="getImage(info.shop.image_url)" mode=""></image>
					</view>
					<view class="business_R">
						<view class="businessNameBox">
							<view class="businessName" v-if="info.shop">{{info.shop.name}}</view>
							
						</view>
						<view class="businesStype">{{info.shop.industry_name}}</view>
						<view class="addressBox">
							<view class="address">{{info.shop.detailed_address}}</view>
							<view class="addressNum">{{info.shop.juli}}km</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="commentBoxs" v-if="showCommentFlag">
			<view class="commentBox" v-if="commentList.length>0">
				<view class="commentItem" v-for="(item,index) in commentList" :key="index">
					<view class="commentImage">
						<image :src="getImage(item.user.image_url)" mode="" :data-id="item.user.id" @click="toMine">
						</image>
					</view>
					<view class="commentCont">
						<view class="commentUser">
							<view class="commentName">{{item.user.username}}</view>
							<view class="likesBox" @click="giveComment" :data-id="item.id" data-type="main"
								:data-index="index">
								<u-icon name="heart-fill" color="#FF5555" v-if="item.ShareCommentFabulous"></u-icon>
								<u-icon name="heart-fill" color="#707070" v-else></u-icon>
								<view class="likesNum">{{item.fabulous_num}}</view>
							</view>
						</view>
						<view class="commenttext" @longtap="showDel" :data-index="index" data-type="main"
							:data-userid="item.user.id">{{item.content}}</view>
						<view class="commenttime">
							<text>{{item.create_time}}</text>
							<text @click="replyComment" :data-index="index" data-type="main">回复</text>
						</view>

						<view class="replyBox">
							<view class="replyItem" v-for="(pitem,pindex) in item.sonComment" :key="index">
								<view class="replyImage">
									<image :src="getImage(pitem.user.image_url)" mode="" :data-id="pitem.user.id"
										@click="toMine"></image>
								</view>
								<view class="reply_R">
									<view class="replyUser">
										<view class="replyName">{{pitem.user.username}}</view>
										<view class="replyLike" @click="giveComment" :data-id="pitem.id" data-type="son"
											:data-index="index" :data-pindex="pindex">
											<u-icon name="heart-fill" color="#FF5555"
												v-if="pitem.ShareCommentReplyFabulous"></u-icon>
											<u-icon name="heart-fill" color="#707070" v-else></u-icon>
											<view class="replyLikeNum">{{pitem.fabulous_num}}</view>
										</view>
									</view>
									<view class="replyCont" @longtap="showDel" :data-index="index" :data-pindex="pindex"
										data-type="son" :data-userid="pitem.user.id">{{pitem.content}}</view>
									<view class="replyTime">
										<text>{{pitem.create_time}}</text>
										<text @click="replyComment" :data-index="index" :data-pindex="pindex"
											data-type="son">回复</text>
									</view>
								</view>
							</view>
							<view class="more" v-if="item.moreFlag" :data-index="index" @click="getReplyList">展开更多回复
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="emptyBox" v-else>
				<u-empty text="快来评论吧~" mode="message"></u-empty>
			</view>
		</view>
		<view class="tabbarBox">
			<view class="inputBox">
				<input type="text" placeholder="说点什么吧" v-model="commentCont" confirm-type="send" @confirm="CommentBtn"
					focus v-if="replyFlag" />
				<input type="text" placeholder="说点什么吧" v-model="commentCont" confirm-type="send" @confirm="CommentBtn"
					v-else />
			</view>
			<view class="tabbarIcon">
				<!-- <view class="IconItem">
					<u-icon name="heart" size="48" color="#fff"></u-icon>
					<view class="IconName">点赞</view>
				</view> -->
				<view @click="CommentBtn" style="color: white;">
					{{replyFlag?'回复':'发送'}}
				</view>
				<view class="IconItem" @click="toCollect">
					<u-icon name="heart-fill" size="48" color="#FF5555" v-if="info.UserShareCollection"></u-icon>
					<u-icon name="heart-fill" size="48" color="#fff" v-else></u-icon>
					<view class="IconName">收藏</view>
				</view>
				<view class="IconItem" @click="toggleComment">
					<u-icon name="chat" size="48" color="#fff"></u-icon>
					<view class="IconName">评论</view>
				</view>
			</view>
		</view>
		<view class="popupBox">
			<u-modal v-model="showName" title="举报" :show-cancel-button="true" @confirm="modifyName">
				<view style="padding:64upx;">
					<textarea placeholder="请输入" v-model="explain" />
				</view>
			</u-modal>
		</view>
		<u-toast ref="uToast" />
		<!-- <view class="sheetBox">
			<u-action-sheet :list="MenuList" v-model="showMenu"></u-action-sheet>
		</view> -->
		<!-- #endif -->
		<view class="shareMark" v-if="shareFlag" @click="hideShare"></view>
		<view class="shareCon" v-if="shareFlag">
			<!-- <view class="shareItem" @click="toMaterial">
				<image src="../../static/index/WeChat.png"></image>
				<view>素材</view>
			</view> -->
			<!-- #ifdef APP -->
			<view class="shareItem" @click="shareWeiXin">
				<image src="../../static/index/WeChat.png"></image>
				<view>微信好友</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share" class="shareBtns">
				<view class="shareItem">
					<image src="../../static/index/WeChat.png"></image>
					<view>微信好友</view>
				</view>
			</button>
			<!-- #endif -->
			<view class="shareItem" @click="savePhoto">
				<image src="../../static/index/savePhoto.png"></image>
				<view>保存相册</view>
			</view>
		</view>
		<image class="posterUrl" :src="posterUrl" mode="heightFix" v-if="shareFlag&&posterUrl"></image>
		<view class="poster">
			<image src="../../static/share/backT.png" class="backT"></image>
			<image src="../../static/share/back.png" class="backMain"></image>
			<image src="../../static/share/backB.png" class="backB"></image>
			<image src="../../static/share/backLTxt.png" class="backLTxt"></image>
			<image src="../../static/share/backRNr.png" class="backRDr"></image>
			<view class="conT">
				<view class="conUserMsg">{{shareStr}}<text style="color: #43CEED;font-size: 14px;line-height: 20px;"
						class="conUserMsgTxt" v-if="info.label">#{{info.label.name}}</text></view>
				<view class="conCardList" v-if="info.share_image&&info.share_image.length>0">
					<image :src="getVideoUrl(info.share_image.image_url)" mode="widthFix" class="conCardListImg">
					</image>
				</view>
			</view>
			<view class="conB">
				<!-- <view class="conBL">
					<image :src="getImage(info.image_url)" class="conBLImg"></image>
				</view> -->
				<view class="conBC">
					<view class="conBCName">与【{{userInfo.username}}】一起在若免</view>
					<view class="conBCIntro">分享好物，更多惊喜等你搜寻！</view>
				</view>
				<view class="conBR">
					<image :src="codeImg" class="conBRImg"></image>
				</view>
			</view>
		</view>
		<canvas v-if="canvasFlag"
			:style="{'width':posterData.poster.width +'px','height':posterData.poster.height +'px'}" class="can"
			canvas-id="mycan" style="position: fixed;top: -9999999px;"></canvas>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				itemList: [{
					head: "店内装修是让人放松和舒适的风格，店里的鲜花也会定期更换，平时来吃饭的大部分是周围的上班族，店员的小姐姐很好",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				}],
				commentCont: '',
				MenuList: [{
					text: '分享'
				}, {
					text: '编辑'
				}, {
					text: '删除'
				}],
				showMenu: false,
				// #endif
				id: "",
				info: {},
				showName: false,
				explain: "",
				commentList: [],
				showCommentFlag: false,
				replyFlag: false,
				commentPage: 1,
				replyPage: 1,
				focusFlag: false,
				replyType: "",
				replyMainIndex: "",
				replySonIndex: "",
				shareFlag: false,
				userInfo: {},
				shareStr: "",
				codeImg: "",
				posterData: {},
				canvasFlag: false,
				posterUrl: ""
			}
		},
		onLoad(options) {
			
			this.id = options.id;
			this.getDetail();
			this.getQrcode();
			this.userInfo = uni.getStorageSync("rmUser");
			// #ifdef APP-PLUS
			const subNVue = uni.getSubNVueById('videoId');
      console.log(subNVue)
			subNVue.show()
			// #endif
		},
		onShareAppMessage(res) {
			// if (res.from === 'button') {// 来自页面内分享按钮
			//   // //console.log(res)
			// }
			return {
				title: this.shareStr,
				path: '/pages/pagefive/pages/VideoDetail/VideoDetail?id=' + this.id,
				imageUrl: this.getVideoUrl(this.info.share_image.image_url)
			}
		},
		onNavigationBarButtonTap(e) {
			this.showSheet();
			
			// if(e.type == "share"){
			// 	uni.share({
			// 	  provider: "weixin",
			// 	  scene: "WXSceneSession",
			// 	  type: 0,
			// 	  href: "http://uniapp.dcloud.io/",
			// 	  title: "uni-app分享",
			// 	  summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
			// 	  imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
			// 	  success: function (res) {
			// 	    console.log("success:" + JSON.stringify(res));
			// 	  },
			// 	  fail: function (err) {
			// 	    console.log("fail:" + JSON.stringify(err));
			// 	  }
			// 	});
			// }
		},
		methods: {
			hideShare() {
				this.shareFlag = false;
			},
			shareWeiXin() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "https://www.ruo.shanxiyf.com/appShare.html?type=spnr&nrid=" + this.id,
					title: this.info.title,
					summary: this.shareStr,
					imageUrl: "https://ruomian.oss-cn-chengdu.aliyuncs.com/logo108.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			toMaterial() {
				let arr = [];
				arr.push({
					url: this.posterUrl,
					flag: true
				});
				for (let i = 0; i < this.nowGroupObj.images.length; i++) {
					arr.push({
						url: this.getImage(this.nowGroupObj.images[i].image_url),
						flag: true
					});
				}
				let obj = {};
				obj.imgArr = arr;
				obj.shareTxt = this.shareStr;
				uni.setStorageSync("materialData", obj);
				uni.navigateTo({
					url: "/pages/pagethree/pages/material/material"
				})
			},
			getQrcode() {
				let obj = {};
				// #ifdef MP-WEIXIN
				obj.type = 1;
				// #endif
				// #ifdef APP
				obj.type = 2;
				// #endif
				
				obj.data = {};
				obj.data.type = "spnr";
				obj.data.nrid = this.id;
				// obj.data.mdid = this.nowGroupObj.shopObj.shop_id;
				this.$u.api.qrcode(obj).then(res => {
					this.codeImg = res.data.data.replace(/[\n\r]/g, '');
				})
			},
			getElementInfo(name) {
				let _this = this;
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + name).boundingClientRect(data => {
						_this.posterData[name] = data;
						
						resolve(data)
					}).exec();
				})

			},
			savePhoto() {
				uni.saveImageToPhotosAlbum({
					filePath: this.posterUrl,
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
						});
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			getPoster() {
				uni.showLoading({
					title: "生成海报中..."
				})
				let promiseArr = [];
				if (this.info.label) {
					promiseArr = [
						this.getElementInfo("poster"),
						this.getElementInfo("backT"),
						this.getElementInfo("backMain"),
						this.getElementInfo("backB"),
						this.getElementInfo("backLTxt"),
						this.getElementInfo("backRDr"),
						this.getElementInfo("conT"),
						this.getElementInfo("conUserMsg"),
						this.getElementInfo("conUserMsgTxt"),
						this.getElementInfo("conCardListImg"),
						this.getElementInfo("conBCName"),
						this.getElementInfo("conBCIntro"),
						this.getElementInfo("conBR"),
						this.getElementInfo("conBRImg")
					]
				} else {
					promiseArr = [
						this.getElementInfo("poster"),
						this.getElementInfo("backT"),
						this.getElementInfo("backMain"),
						this.getElementInfo("backB"),
						this.getElementInfo("backLTxt"),
						this.getElementInfo("backRDr"),
						this.getElementInfo("conT"),
						this.getElementInfo("conUserMsg"),
						this.getElementInfo("conCardListImg"),
						this.getElementInfo("conBCName"),
						this.getElementInfo("conBCIntro"),
						this.getElementInfo("conBR"),
						this.getElementInfo("conBRImg")
					]
				}
				let ctx = uni.createCanvasContext('mycan');
				// this.getImageInfo("../../static/share/back.png","backMain").then(res=>{
				// 	//console.log(res)
				// })
				
				Promise.all(promiseArr).then(res => {
					this.canvasFlag = true;
					this.$forceUpdate();
					ctx.drawImage("/static/share/back.png", this.posterData.backMain.left, this.posterData.backMain
						.top, this.posterData.backMain.width, this.posterData.backMain.height);
					ctx.drawImage("/static/share/backB.png", this.posterData.backB.left, this.posterData.backB.top,
						this.posterData.backB.width, this.posterData.backB.height);
					ctx.drawImage("/static/share/backT.png", this.posterData.backT.left, this.posterData.backT.top,
						this.posterData.backT.width, this.posterData.backT.height);
					ctx.drawImage("/static/share/backLTxt.png", this.posterData.backLTxt.left, this.posterData
						.backLTxt.top, this.posterData.backLTxt.width, this.posterData.backLTxt.height);
					ctx.drawImage("/static/share/backRNr.png", this.posterData.backRDr.left, this.posterData
						.backRDr.top, this.posterData.backRDr.width, this.posterData.backRDr.height);
					ctx.save();
					ctx.setFillStyle("#FFFFFF");
					ctx.setStrokeStyle('#FFFFFF')
					ctx.setLineJoin('round'); //交点设置成圆角
					ctx.setLineWidth(16);
					ctx.strokeRect(this.posterData.conT.left + 8, this.posterData.conT.top + 8, this.posterData
						.conT.width - 16, this.posterData.conT.height - 16);
					ctx.fillRect(this.posterData.conT.left + 16, this.posterData.conT.top + 16, this.posterData
						.conT.width - 32, this.posterData.conT.height - 32);
					ctx.stroke();
					ctx.closePath();
					ctx.save();
					ctx.restore();
					ctx.font = "bold 14px Microsoft YaHei";
					ctx.fillStyle = "#3F3F3F";
					ctx.textBaseline = "bottom";
					let intros = ""
					var chr = this.shareStr.split("");
					var temp = "";
					var row = [];
					
					for (var a = 0; a < chr.length; a++) {
						if (temp.length * 14 < this.posterData.conUserMsg.width) {
							;
						} else {
							row.push(temp);
							temp = "";
						}
						temp += chr[a];
					}
					row.push(temp);
					for (var b = 0; b < row.length; b++) {
						ctx.fillText(row[b], this.posterData.conUserMsg.left, this.posterData.conUserMsg.top + (b +
							1) * 20);
					}
					ctx.restore();
					if(this.info.label){
						ctx.font = "bold 14px Microsoft YaHei";
						ctx.fillStyle = "#43CEED";
						ctx.textBaseline = "bottom";
						ctx.fillText("#" + this.info.label.name, this.posterData.conUserMsgTxt.left, this.posterData
							.conUserMsgTxt.top + 20);
						ctx.restore();
					}
					app.$vm.getImgBase(this.getVideoUrl(this.info.share_image.image_url)).then(rekl=>{
							ctx.drawImage(rekl, this.posterData.conCardListImg.left, this
								.posterData.conCardListImg.top, this.posterData.conCardListImg
								.width, this.posterData.conCardListImg.height);
							ctx.font = "15px Microsoft YaHei";
							ctx.fillStyle = "#FFFFFF";
							ctx.textBaseline = "middle";
							ctx.fillText('与【' + this.userInfo.username + '】一起在若免', this.posterData[
								'conBCName'].left, this.posterData['conBCName'].top + 11);
							ctx.save();
							ctx.restore();
							ctx.font = "12px Microsoft YaHei";
							ctx.fillStyle = "#FFFFFF";
							ctx.textBaseline = "middle";
							ctx.fillText('分享好物，更多惊喜等你搜寻！', this.posterData['conBCIntro'].left, this
								.posterData['conBCIntro'].top + 9);
							ctx.save();
							ctx.restore();
							ctx.setFillStyle("#FFFFFF");
							ctx.fillRect(this.posterData['conBR'].left, this.posterData['conBR'].top,
								this.posterData['conBR'].width, this.posterData['conBR'].height);
							// #ifdef MP-WEIXIN
							let fsm = wx.getFileSystemManager(); //文件管理器
							let FILE_BASE_NAME = new Date().getTime(); //文件名
							let format = 'png'; //文件后缀
							
							let buffer = wx.base64ToArrayBuffer(this.codeImg.split(",")[
								1]); //base 转二进制
							let filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
							
							let _this = this;
							fsm.writeFile({ //写文件
								filePath,
								data: buffer,
								encoding: 'binary',
								success: rem1 => {
						
									wx.getImageInfo({ //读取图片
										src: filePath,
										success: rem2 => {
						
											ctx.drawImage(rem2.path, this
												.posterData['conBRImg']
												.left, this.posterData[
													'conBRImg'].top, this
												.posterData['conBRImg']
												.width, this.posterData[
													'conBRImg'].height
											) //画图
											ctx.save();
											ctx.draw(false, () => {
												let _this = this;
												setTimeout(function() {
													uni.canvasToTempFilePath({
														canvasId: 'mycan',
														fileType: 'jpg',
														x: 0,
														y: 0,
														quality: 1,
														success: function(
															res
														) {
															console
																.log(
																	res
																	.tempFilePath
																)
															// 在这里保存图片
															_this
																.posterUrl =
																res
																.tempFilePath;
															_this
																.$forceUpdate();
															uni.hideLoading()
														},
														fail: function(
															error
														) {
															console
																.log(
																	error
																)
														},
													})
												}, 500)
											})
										},
										error(res) {
											console.log({
												res
											})
										}
									})
								},
								fail: err => {
									console.log(err)
								}
							})
							// #endif
							// #ifdef APP
							ctx.drawImage(this.codeImg, this.posterData['conBRImg'].left, this
								.posterData['conBRImg'].top, this.posterData['conBRImg'].width,
								this.posterData['conBRImg'].height);
							ctx.save();
							
							ctx.draw(false, (() => {
								
								let _this = this;
								setTimeout(function() {
									uni.canvasToTempFilePath({
										canvasId: 'mycan',
										fileType: 'jpg',
										x: 0,
										y: 0,
										quality: 1,
										success: function(res) {
											// 在这里保存图片
											_this.posterUrl = res
												.tempFilePath;
											uni.$emit("posterShow", res
												.tempFilePath)
											uni.hideLoading()
											_this.$forceUpdate();
										},
										fail: function(error) {
											
										},
									})
								}, 500)
							})())
							// #endif
						
					})

				})

			},
			modifyName() {
				let obj = {};
				obj.share_id = this.id;
				obj.content = this.explain;
				this.$u.api.shareReportAdd({
					data: obj
				}).then(res => {
					this.$refs.uToast.show({
						title: "举报成功",
						type: "success",
						duration: 2000
					})
				})
			},
			toWebview() {
				uni.navigateTo({
					url: "/pages/pagefive/pages/webView/webView?url=" + encodeURIComponent(this.info
						.third_party_url)
				})
			},
			toShop() {
				if (this.info.ShopPackage) {
					app.$vm.globalData.shareid = this.info.user_id;
					app.$vm.globalData.tgid = this.info.ShopPackage.id;
					uni.navigateTo({
						url: "/pages/pagethree/pages/OfferDetails/OfferDetails?id=" + this.info.ShopPackage.id
					})
				} else if (this.info.shop) {
					app.$vm.globalData.shareid = this.info.user_id;
					app.$vm.globalData.mdid = this.info.shop.id;
					uni.navigateTo({
						url: "/pages/pagetwo/pages/FoodDetails/FoodDetails?id=" + this.info.shop.id
					})
				}
			},
			showSheet() {
				let arr = [];
				if (this.info.user_id == uni.getStorageSync("userId")) {
					arr = ["编辑", "分享", "删除"];
				} else {
					arr = ["分享", "举报"];
				}
				uni.showActionSheet({
					itemList: arr,
					success: res => {
						
						if (this.info.user_id == uni.getStorageSync("userId")) {
							if (res.tapIndex == 0) {
								uni.navigateTo({
									url: "/pages/pagefour/pages/Release/Release?id=" + this.id
								})
							} else if (res.tapIndex == 1) {
								this.shareFlag = true;
								this.getPoster();
							} else if (res.tapIndex == 2) {
								this.$u.api.shareDel({
									id: this.id
								}).then(res => {
									
									this.$refs.uToast.show({
										title: "删除成功",
										type: "success",
										duration: 2000
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1500)
								})
							}
						} else {
							if (res.tapIndex == 0) {
								this.shareFlag = true;
								this.getPoster();
							} else if (res.tapIndex == 1) {
								// #ifdef MP-WEIXIN
								this.showName = true;
								// #endif
								// #ifdef APP
								uni.$emit("showJb")
								// #endif
							}
						}
					}
				})
			},
			toMine(e) {
				
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url: "/pages/pageone/pages/Business-card/Business-card?id=" + id
				})
			},
			giveComment(e) {
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let obj = {};
				//obj.data = {};
				if (type == 'main') {
					obj.data.share_id = this.info.id;
					obj.data.share_comment_id = id;
					this.$u.api.shareCommentFabulousAdd(obj).then(res => {
						
						this.commentList[index].ShareCommentFabulous = 1;
						this.commentList[index].fabulous_num = this.commentList[index].fabulous_num + 1;
						this.$refs.uToast.show({
							title: "点赞成功",
							type: "success",
							duration: 2000
						})
					})
				} else if (type == 'son') {
					let pindex = e.target.dataset.pindex || e.currentTarget.dataset.pindex;
					obj.data.share_id = this.info.id;
					obj.data.share_comment_reply_id = id;
					this.$u.api.shareCommentReplyFabulousAdd(obj).then(res => {
						
						this.commentList[index].sonComment[pindex].ShareCommentReplyFabulous = 1;
						this.commentList[index].sonComment[pindex].fabulous_num = this.commentList[index]
							.sonComment[pindex].fabulous_num + 1;
						this.$refs.uToast.show({
							title: "点赞成功",
							type: "success",
							duration: 2000
						})
					})
				}
			},
			showDel(e) {
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				let userid = e.target.dataset.userid || e.currentTarget.dataset.userid;
				if (userid == uni.getStorageSync("userId")) {
					uni.showActionSheet({
						itemList: ["删除"],
						success: res => {
							
							let obj = {};
							if (type == 'main') {
								obj.id = this.commentList[index].id;
								this.$u.api.shareCommentDel(obj).then(res => {
									this.$refs.uToast.show({
										title: "删除成功",
										type: "success",
										duration: 2000
									})
									this.commentList.splice(index, 1)
								})
							} else if (type == 'son') {
								let pindex = e.target.dataset.pindex || e.currentTarget.dataset.pindex;
								obj.id = this.commentList[index].sonComment[pindex].id;
								this.$u.api.shareCommentReplyDel(obj).then(res => {
									this.$refs.uToast.show({
										title: "删除成功",
										type: "success",
										duration: 2000
									})
									this.commentList[index].sonComment.splice(pindex, 1)
								})
							}
						}
					})
				}
			},
			replyComment(e) {
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				if (type == 'main') {
					this.replyMainIndex = index;
				} else if (type == 'son') {
					let pindex = e.target.dataset.pindex || e.currentTarget.dataset.pindex;
					this.replyMainIndex = index;
					this.replySonIndex = pindex;
				}
				this.replyType = type;
				this.replyFlag = true;
			},
			toggleComment() {
				this.showCommentFlag = !this.showCommentFlag;
			},
			toCollect() {
				let obj = {};
				if (this.info.UserShareCollection) {
					obj.share_id = this.info.UserShareCollection.share_id;
					obj.user_id = uni.getStorageSync("userId");
					this.$u.api.userShareCollectionDel(obj).then(res => {
						this.$refs.uToast.show({
							title: "已取消收藏",
							type: "success",
							duration: 2000
						})
						this.getDetail();
					})
				} else {
					obj.share_id = this.info.id;
          obj.user_id = uni.getStorageSync("userId");
					this.$u.api.userShareCollectionAdd(obj).then(res => {
						
						this.$refs.uToast.show({
							title: "已收藏",
							type: "success",
							duration: 2000
						})
						this.getDetail();
					})
				}

			},
			slotMenu() {

			},
			getVideoUrl(url) {
				return app.$vm.globalData.imgBaseUrl + url + app.$vm.globalData.videoThumb;
			},
			getImage(url) {
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getDetail() {
				let obj = {};
				obj.id = this.id;
				obj.longitude = uni.getStorageSync("longitude");//117.082094;
				obj.dimension = uni.getStorageSync("latitude");//39.987725;
				obj.user_id = uni.getStorageSync("userId");
				if (uni.getStorageSync("rmToken")) {
					this.$u.api.shareDetails(obj).then(res => {
						this.info = res.data;
						this.shareStr = res.data.title;
						this.getCommentList();
						if (this.info.shop) {
							this.info.shop.juli = this.info.shop.juli.toFixed(2);
						}
					})
				} else {
					this.$u.api.indexShareDetails(obj).then(res => {
						
						this.info = res.data;
						this.shareStr = res.data.title;
						if (this.info.shop) {
							this.info.shop.juli = this.info.shop.juli.toFixed(2);
						}
					})
				}
			},
			getCommentList() {
				let obj = {};
				obj.share_id = this.info.id;
				
				obj.user_id = uni.getStorageSync("userId");;
				obj.limit = 10;
				this.$u.api.shareCommentList(obj).then(res => {
					
					if (this.commentPage == 1) {
						this.commentList = res.list.data.map(cur => {
							cur.sonComment = [];
							cur.moreFlag = true;
							cur.replyPage = 0;
							return cur;
						});
					} else {
						this.commentList = this.commentList.concat(res.list.data.map(cur => {
							cur.sonComment = [];
							cur.moreFlag = true;
							cur.replyPage = 0;
							return cur;
						}));
					}

				})
			},
			getReplyList(e) {
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let dataObj = JSON.parse(JSON.stringify(this.commentList[index]));
				dataObj.replyPage = dataObj.replyPage + 1;
				let obj = {};
				obj.page = dataObj.replyPage;
				obj.limit = 10;
				obj.share_comment_id = dataObj.id;
        obj.user_id = uni.getStorageSync("userId");
				this.$u.api.shareCommentReplyList(obj).then(res => {
					
					if (dataObj.replyPage == 1) {
						dataObj.sonComment = res.data.list.data;
					} else {
						dataObj.sonComment = dataObj.sonComment.concat(res.data.list.data);
					}
					if (dataObj.replyPage < res.data.list.last_page) {
						dataObj.moreFlag = true;
					} else {
						dataObj.moreFlag = false;
					}
					this.commentList.splice(index, 1, dataObj);
				})
			},
			CommentBtn() {
				
				if (!this.commentCont.trim()) {
					this.$refs.uToast.show({
						title: "评论内容不能为空",
						type: "error",
						duration: 2000
					})
					return false;
				}
				if (this.replyFlag) {
					let obj = {};
					obj.share_comment_id = this.commentList[this.replyMainIndex].id;
					obj.content = this.commentCont;
					if (this.replyType == 'main') {
						obj.share_comment_reply_id = 0;
					} else {
						obj.share_comment_reply_id = this.commentList[this.replyMainIndex].sonComment[this.replySonIndex]
							.id;
					}
					this.$u.api.shareCommentReplyAdd(obj).then(res => {
						this.$refs.uToast.show({
							title: "回复成功",
							type: "success",
							duration: 2000
						})
						let objs = res.data.data;
						objs.user = {};
						objs.user.id = uni.getStorageSync("rmUser").user_id;
						objs.user.username = uni.getStorageSync("rmUser").username;
						objs.user.image_url = uni.getStorageSync("rmUser").image_url;
						this.replyFlag = false;
						this.commentCont = "";
						this.commentList[this.replyMainIndex].sonComment.unshift(objs);
					})
				} else {
					let obj = {};
					obj.share_id = this.info.id;
					obj.content = this.commentCont;
					obj.user_id = uni.getStorageSync("userId");
					// obj.fabulous_num = this.commentCont;
					obj.fabulous_num = 1;
					this.$u.api.shareCommentAdd(obj).then(res => {
						
						this.$refs.uToast.show({
							title: "评论成功",
							type: "success",
							duration: 2000
						})
						// let objs = res.data.data;
						// objs.user = {};
						// objs.user.id = uni.getStorageSync("rmUser").user_id;
						// objs.user.username = uni.getStorageSync("rmUser").username;
						// objs.user.image_url = uni.getStorageSync("rmUser").image_url;
						// this.replyFlag = false;
						// this.commentCont = "";
						// this.commentList.unshift(objs);
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.shareBtns {
		background: white !important;
		margin: 0 !important;
		padding: 0 !important;
		outline: none !important;
		border: none !important;
	}

	.shareBtns::before {
		border: none !important;
	}

	.shareBtns::after {
		border: none !important;
	}

	.shareCon {
		width: 100%;
		height: 180upx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: white;
		z-index: 1000000;
		box-sizing: border-box;
		padding: 0 70upx;
		display: flex;
		justify-content: space-between;
	}

	.shareItem {
		// width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 20upx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.shareItem>image {
		width: 90upx;
		height: 90upx;
	}

	.shareItem>view {
		font-size: 28upx;
		line-height: 28upx;
		color: #3F3F3F;
	}

	.shareMark {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 999999;
	}

	.posterUrl {
		// width: 542upx;
		height: 60%;
		bottom: 212upx;
		left: 50%;
		transform: translateX(-50%);
		position: fixed;
		z-index: 1000000;
	}

	.conB {
		width: 100%;
		margin-top: 24upx;
		display: flex;
		box-sizing: border-box;
		padding: 0 10upx;
		align-items: center;
		height: 138upx;
	}

	.conBL {
		width: 124upx;
		height: 124upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: white;
		margin-right: 16upx;
	}

	.conBL>image {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
	}

	.conBC {
		width: calc(100% - 154upx);
		height: 138upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.conBC>view:nth-child(1) {
		font-size: 30upx;
		line-height: 42upx;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		margin-bottom: 8upx;
	}

	.conBC>view:nth-child(2) {
		font-size: 24upx;
		line-height: 34upx;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		// margin-bottom: 8upx;
	}

	.conBR {
		width: 138upx;
		height: 138upx;
		background: white;
		border-radius: 8upx;
		margin-left: 16upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.conBR>image {
		width: 114upx;
		height: 114upx;
		border-radius: 8upx;
	}



	.conCardList {
		margin-top: 32upx;
	}

	.conCardList>image {
		width: 100%;
	}

	.conCardItem {
		width: 100%;
		height: 126upx;
		box-sizing: border-box;
		padding: 20upx 30upx 26upx 20upx;
		display: flex;
		align-items: center;
		background-image: url(../../static/share/shareItem.png);
		background-position: 0 0;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}

	.conCardItem:last-child {
		margin-bottom: 0;
	}

	.cardAvator {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 12upx;
	}

	.cardShareIcon {
		width: 54upx;
		height: 52upx;
		margin-left: 12upx;
	}

	.cardInfo {
		width: calc(100% - 158upx);
		height: 80upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cardInfo>view:nth-child(1) {
		font-size: 28upx;
		color: #3F3F3F;
		font-weight: bold;
		line-height: 40upx;
		margin-bottom: 6upx;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cardInfo>view:nth-child(2) {
		display: flex;
		align-items: center;
	}

	.cardInfo>view:nth-child(2)>view {
		font-size: 24upx;
		color: #3F3F3F;
		line-height: 34upx;
	}

	.cardInfo>view:nth-child(2)>view:nth-child(1) {
		margin-right: 20upx;
	}


	.conT {
		width: 100%;
		box-sizing: border-box;
		padding: 56upx 40upx 58upx;
		border-radius: 16upx;
		background: white;
	}

	.conAvator {
		width: 100%;
		height: 124upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.conAvatorL {
		width: 124upx;
		height: 124upx;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16upx;
		position: relative;
	}

	.avatorBack {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.avatorCon {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
		position: relative;
		z-index: 9;
	}

	.conAvatorR {
		width: calc(100% - 140upx);
		height: 124upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.conAvatorRT {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.conAvatorRT>view {
		font-size: 32upx;
		line-height: 44upx;
		color: #3F3F3F;
		font-weight: bold;
	}

	.conAvatorRT>image {
		width: 18upx;
		height: 28upx;
		margin-left: 8upx;
	}

	.conAvatorRB {
		font-size: 28upx;
		color: #3F3F3F;
		line-height: 40upx;
		margin-top: 16upx;
	}

	.conUserMsg {
		// margin-top: 16upx;
		width: 100%;
		line-height: 20px;
		color: #3F3F3F;
		font-size: 14px;
		white-space: pre-wrap;
		font-weight: bold;
	}




	.backLTxt {
		width: 102upx;
		height: 50upx;
		position: absolute;
		top: 64upx;
		left: 34upx;
		z-index: 1;
	}

	.backRDr {
		width: 190upx;
		height: 52upx;
		position: absolute;
		right: 36upx;
		top: 64upx;
		z-index: 1;
	}

	.poster {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 122upx 32upx 24upx;
		z-index: -1;
		opacity: 0;
	}

	.backT {
		width: 100%;
		height: 202upx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.backMain {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -3;
	}

	.backB {
		width: 100%;
		height: 548upx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -2;
	}

	.commentBoxs {
		width: 100%;
		max-height: 70%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: white;
		z-index: 10000;
		padding-bottom: 104upx;
		overflow-y: auto;

		.commentBox {
			padding: 48upx 24upx;

			.commentItem {
				display: flex;
				padding-bottom: 16upx;
				border-bottom: 2upx solid #F5F5F5;
				margin-bottom: 16upx;

				.commentImage {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 16upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.commentCont {
					width: calc(100% - 96upx);

					.commentUser {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.commentName {
							font-size: 28upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}

						.likesBox {
							display: flex;
							align-items: center;

							.likesNum {
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #666666;
								margin-left: 8upx;
							}
						}
					}

					.commenttime {
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin-top: 8upx;
						display: flex;
						align-items: center;

						>text:nth-child(1) {
							font-size: 20upx;
							line-height: 20upx;
							color: #999999;
						}

						>text:nth-child(2) {
							font-size: 20upx;
							line-height: 20upx;
							color: #333333;
							margin-left: 20upx;
						}
					}

					.commenttext {
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-top: 16upx;
					}

					.replyBox {
						margin-top: 16upx;

						.more {
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #4C8CCE;
							// padding: 16upx 0;
						}

						.replyItem {
							display: flex;

							.replyImage {
								width: 40upx;
								height: 40upx;
								border-radius: 50%;
								overflow: hidden;
								margin-right: 16upx;

								image {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}

							.reply_R {
								width: calc(100% - 56upx);

								.replyUser {
									display: flex;
									justify-content: space-between;
									align-items: center;
									height: 40upx;

									.replyName {
										font-size: 28upx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #666666;
										line-height: 40upx;
									}

									.replyLike {
										display: flex;
										align-items: center;

										.replyLikeNum {
											font-size: 20upx;
											font-family: Source Han Sans CN;
											font-weight: 400;
											color: #666666;
											margin-left: 8upx;
										}
									}
								}

								.replyTime {
									font-size: 20upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #999999;
									margin-top: 16upx;
									display: flex;
									align-items: center;

									>text:nth-child(1) {
										font-size: 20upx;
										line-height: 20upx;
										color: #999999;
									}

									>text:nth-child(2) {
										font-size: 20upx;
										line-height: 20upx;
										color: #333333;
										margin-left: 20upx;
									}
								}

								.replyCont {
									font-size: 20upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #333333;
									margin-top: 16upx;
								}

							}
						}
					}
				}
			}
		}

		.emptyBox {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750upx;
			height: 300upx;
		}
	}


	// #ifdef MP-WEIXIN
	.VideoDetail {
		height: 100vh;
		overflow: auto;

		// padding-bottom: 104upx;
		.slotBox {
			padding-right: 24upx;
		}

		.VideoDetailBox {
			height: 100%;

			.VideoBox {
				width: 100vw;
				height: calc(100% - 104upx);

				video {
					width: 100%;
					height: 100%;
				}
			}

			.videoInfo {
				position: fixed;
				bottom: 136upx;
				// left: 50%;
				left: 24upx;
				width: 702upx;
				// transform: translateX(-50%);
				// padding: 0 24upx;
				z-index: 9999;

				.userInfo {
					display: flex;
					align-items: center;
					padding: 0 24upx;

					.userImage {
						width: 56upx;
						height: 56upx;
						border-radius: 50%;
						overflow: hidden;

						// background-color: #007AFF;
						image {
							width: 100%;
							height: 100%;
						}
					}

					.userName {
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 16upx;
					}
				}

				.videoCont {
					padding: 0 24upx;

					// margin-top: 24upx;
					// background: rgba(0,0,0,0.2);
					/deep/.u-collapse-title {
						color: #fff;
					}

					.collapse-item {
						width: 100%;
						color: #fff;
					}
				}

				.businessBox {
					display: flex;
					width: 702upx;
					// height: 144px;
					background: #3A3A3A;
					opacity: 0.8;
					border-radius: 8upx;
					padding: 24upx 16upx;
					margin: 12upx auto;

					.businessImage {
						width: 96upx;
						height: 96upx;
						border-radius: 8upx;
						margin-right: 16upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.business_R {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: calc(702upx - 144upx);

						.businessNameBox {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.businessName {
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								color: #fff;
							}

							.businessGive {
								display: flex;
								align-items: center;

								.businessGiveNum {
									font-size: 16upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #fff;
									margin-left: 8upx;
								}
							}
						}

						.businesStype {
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #CCCCCC;
						}

						.addressBox {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #CCCCCC;
						}
					}
				}
			}
		}

		.tabbarBox {
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			width: 750upx;
			height: 104upx;
			background: #222222;
			opacity: 1;
			padding: 24upx;
			z-index: 10001;

			.inputBox {
				background: #fff;
				opacity: 1;
				border-radius: 28upx;

				input {
					width: 294upx;
					height: 56upx;
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					padding-left: 32upx;
					// line-height: 56upx;
					color: #333;
				}
			}

			.tabbarIcon {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: calc(750upx - 294upx);
				padding-left: 32upx;

				.IconItem {
					display: flex;
					align-items: center;

					.IconName {
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #fff;
						margin-left: 8upx;
					}
				}
			}
		}
	}

	// #endif
</style>
